<template>
  <div>
    <el-container>
      <el-header>参考模型</el-header>
      <el-main>
        <div id="myChart" :style="{width: '100%', height: '80vh',margin:'0 auto'}"></div>
        <ul id="list">
            <li>最高价平均比例：{{highper}}</li>
            <li>最低价平均比例：{{lowper}}</li>
            <li>开盘价平均比例：{{openper}}</li>
            <li>收盘价平均比例：{{closeper}}</li>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { shanxi, dongfang } from "@/fetch/reget";
export default {
  name: "home",
  data() {
    return {
      highper:"",
      lowper:"",
      openper:"",
      closeper:""
    };
  },
  mounted() {
    let dfPromise = new Promise(resolve => {
      dongfang().then(res => {
        resolve(res.KlineData);
      });
    });
    let sxPromise = new Promise(resolve => {
      shanxi().then(res => {
        resolve(res.KlineData);
      });
    });

    Promise.all([dfPromise, sxPromise]).then(([dfArr, sxArr]) => {
      let xarr = [];
      let higharr = [];
      let lowarr = [];
      let openarr = [];
      let closearr = [];
      let volumearr = [];
      let amountarr = [];
      for (let [index, item] of dfArr.entries()) {
        xarr.push(new Date(item["Time"] * 1000).toLocaleString().split(" ")[0]);
        higharr.push(Number((item["High"] / sxArr[index]["High"]).toFixed(2)));
        lowarr.push(Number((item["Low"] / sxArr[index]["Low"]).toFixed(2)));
        openarr.push(Number((item["Open"] / sxArr[index]["Open"]).toFixed(2)));
        closearr.push(
          Number((item["Close"] / sxArr[index]["Close"]).toFixed(2))
        );
        /*   volumearr.push(
          Number((item["Volume"] / sxArr[index]["Volume"]).toFixed(2))
        );
        amountarr.push(
          Number((item["Amount"] / sxArr[index]["Amount"]).toFixed(2))
        ); */
      }
      this.highper=(higharr.reduce((pre,cur)=>{return pre+cur})/higharr.length).toFixed(2);
      this.lowper=(lowarr.reduce((pre,cur)=>{return pre+cur})/lowarr.length).toFixed(2);
      this.openper=(openarr.reduce((pre,cur)=>{return pre+cur})/openarr.length).toFixed(2);
      this.closeper=(closearr.reduce((pre,cur)=>{return pre+cur})/closearr.length).toFixed(2);
      //console.log(amountarr)
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      //顺滑
      /*   console.log(higharr);
      console.log(lowarr);
      console.log(openarr);
      console.log(closearr);
      console.log(volumearr);
      console.log(amountarr); */
      myChart.setOption({
        title: {
          text: "东方证券和山西证券近一年指标比例",
         /*  subtext:"收盘价平均比例："+per+'\n'+'收盘价平均比例：', */
          subtextStyle:{
            fontSize:"14",
            color:"red",
            lineHeight:"20"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: [
            "最高价",
            "最低价",
            "开盘价",
            "收盘价" /* "成交量","成交额" */
          ],
          top: "10"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "90",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xarr
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "最高价",
            type: "line",

            symbol: "none",
            smooth: true,
            data: higharr
          },
          {
            name: "最低价",
            type: "line",

            symbol: "none",
            smooth: true,
            data: lowarr
          },
          {
            name: "开盘价",
            type: "line",

            symbol: "none",
            smooth: true,
            data: openarr
          },
          {
            name: "收盘价",
            type: "line",

            symbol: "none",
            smooth: true,
            data: closearr
          } /* ,
          {
            name: "成交量",
            type: "line",
           
            symbol: "none",
            smooth: true,
            data: volumearr
          },
          {
            name: "成交额",
            type: "line",
           
            symbol: "none",
            smooth: true,
            data: amountarr
          } */
        ]
      });
    });
  },
  methods: {}
};
</script>
<style scoped lang="less">
.el-header {
  line-height: 60px;
  background: #ef342a;
  color: #fff;
  text-align: center;
}
#list{
   background: #89d3de;
   padding:10px;
   font-size:14px;
   border-radius:5px;
   display: flex;
   flex-wrap: wrap;
   margin:20px auto;width:820px;
   font-weight:bold;
   li{
     width:200px;
     list-style:none;
     line-height:30px;
     text-align:center;
   }
}
</style>

